<template>
  <router-link :to="link" :class="{ 'item-body': true, opening: this.opening }">
    <em>{{ title }}</em>
  </router-link>
</template>

<script>
export default {
  name: "NavigationItem",
  props: {
    link: String,
    title: String,
    opening: Boolean,
  },
};
</script>

<style>
.item-body {
  height: 100%;
  padding: 0px 20px;
  text-decoration: none;
	outline: none;
	color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-body:hover {
  color: white;
  background-color: #d7a882;
  cursor: pointer;
}
.opening {
  color: white;
  background-color: #d7a882;
}
</style>